<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>具名slot</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<p>slot 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。
仍然可以有一个匿名 slot ，它是默认 slot ，作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot ，这些找不到匹配的内容片段将被抛弃。</p>
<div id="container">
	<app-layout>
	  <h1 slot="header">这里可能是一个页面标题</h1>
	  <p>主要内容的一个段落。</p>
	  <p>另一个主要段落。</p>
	  <p slot="footer">这里有一些联系信息</p>
	</app-layout>
</div>

<script type="text/javascript">
	Vue.component('app-layout', {
	  template: '<div class="container">\
		  <header>\
		    <slot name="header"></slot>\
		  </header>\
		  <main>\
		    <slot></slot>\
		  </main>\
		  <footer>\
		    <slot name="footer"></slot>\
		  </footer>\
		</div>'
	});
	// 创建根实例
	new Vue({
	  el: '#container'
	})
</script>
</body>
</html>